<script setup lang="ts">
import { UserAPI } from "@/api/UserAPI";
import router from "@/router";
import { useUserStore } from "@/stores/userStore";
import { Formattime } from "@/logics/geshiitem";
import type { pwdss, youxiang } from "@/types/User";
import { ElMessage } from "element-plus";
import { useHomeStore } from "@/stores/homeStore";
import { HomeAPI } from "@/api/HomeAPI";
import useCountdown from "@/utils/useCountdown";

//导入首页信息
const homeStore = useHomeStore();
//获取头像信息
homeStore.getImgList();
//导入用户store
const useStroe = useUserStore();
//用户信息
const { userinfo } = storeToRefs(useStroe);
//定义修改密码的显示与消失
const centerDialogVisible = ref(false);
//选择的用户头像
const avatar_id = ref(0);
//定义三个密码
const Passwords = ref<pwdss>({
  old_pwd: "",
  new_pwd: "",
  new_pwds: "",
});
//定义邮箱
const Youxiang = ref<youxiang>({
  email: "",
  auth_code: "",
  password: "",
});

//修改密码
async function setpassword() {
  const response = await UserAPI.setPassword(Passwords.value);
  if (response.code === 200) {
    ElMessage({
      message: response.msg,
      type: "success",
    });
    useStroe.$reset();
    router.replace({
      path: "/login",
      query: {
        return: router.currentRoute.value.fullPath, // router对象自带的属性
      },
    });
    centerDialogVisible.value = false;
  } else {
    ElMessage({
      message: response.msg,
      type: "error",
    });
  }
}
//验证密码位数
function validation(password: string) {
  let re = /^[0-9A-Za-z]{5,20}$/;
  if (re.test(password)) {
    return;
  } else {
    ElMessage({
      showClose: true,
      message: "密码必须为5-20位的数字或字母",
      type: "error",
    });
    Passwords.value.new_pwd = "";
  }
}
//修改头像的显示与隐藏
const Touxiang = ref(false);
//修改用户头像
async function setAarter() {
  const response = await UserAPI.setAvatars(avatar_id.value);
  if (response.code === 200) {
    userinfo.value.result.avatar = response.data;
    ElMessage({
      showClose: true,
      message: response.msg,
      type: "success",
    });
    Touxiang.value = false;
  }
}
// 获取倒计时逻辑
const { start, isActive, count } = useCountdown();
//完善信息
const Wanshan = ref(false);

//发送邮箱验证码
async function get_code() {
  const response = await UserAPI.send_email({ email: Youxiang.value.email });
  if (response.code === 200) {
    ElMessage({
      message: response.msg,
      type: "success",
    });
    if (isActive.value) return;
    //倒计时
    start(60);
  } else {
    ElMessage({
      message: response.msg,
      type: "error",
    });
  }
}
//完善信息请求
async function Binding_email() {
  const response = await UserAPI.Binding_email(Youxiang.value);
  if (response.code === 200) {
    ElMessage({
      message: response.msg,
      type: "success",
    });
    Wanshan.value = false;
  } else {
    ElMessage({
      message: response.msg,
      type: "error",
    });
  }
}
//注销登录
function Logout() {
  // 清除用户信息
  useStroe.$reset();
  ElMessage({
    showClose: true,
    message: "退出登录成功",
    type: "success",
  });
  //跳转首页
  router.push("/");
}
</script>
<template>
  <div class="user_info">
    <div class="left">
      <img :src="userinfo.result.avatar" alt="" />
    </div>
    <div class="right">
      <div class="item">
        <span><b>用户名:</b>{{ userinfo.result.username }}</span>
      </div>
      <div class="item">
        <span
          ><b>注册时间:</b>{{ Formattime(userinfo.result.date_joined!) }}</span
        >
      </div>
      <div class="item">
        <span
          ><b>上次登录时间:</b
          >{{ Formattime(userinfo.result.last_login!) }}</span
        >
      </div>
      <div class="item">
        <span><b>来源渠道:</b>{{ userinfo.result.sign_status }}</span>
      </div>
      <div class="item">
        <span><b>账号状态:</b>{{ userinfo.result.account_status }}</span>
      </div>
      <div class="item">
        <span v-if="userinfo.result.email"
          ><b>邮箱:</b>{{ userinfo.result.email }}</span
        >
        <span v-else><b>邮箱:</b><a>绑定邮箱</a></span>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="item">
      <el-button @click="Wanshan = true">完善信息</el-button>
    </div>
    <div class="item">
      <el-button type="success" @click="Touxiang = true">修改头像</el-button>
    </div>
    <div class="item">
      <el-button type="warning" @click="centerDialogVisible = true"
        >修改密码</el-button
      >
    </div>
    <div class="item">
      <el-button type="danger" @click="Logout">注销退出</el-button>
    </div>
  </div>
  <el-dialog
    v-model="centerDialogVisible"
    title="修改密码"
    width="50%"
    align-center
  >
    <div class="edit_info">
      <label>之前的密码</label>
      <el-input
        v-model="Passwords.old_pwd"
        type="password"
        placeholder="请输入之前的密码"
      ></el-input>
      <label>新密码</label>
      <el-input
        @blur="validation(Passwords.new_pwd)"
        type="password"
        v-model="Passwords.new_pwd"
        placeholder="请输入新密码"
      ></el-input>
      <label>再次输入新密码</label>
      <el-input
        v-model="Passwords.new_pwds"
        type="password"
        placeholder="请在次输入新密码"
      ></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="setpassword()">确认</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="Touxiang" title="修改头像" width="50%" align-center>
    <div class="add_mood_content body">
      <div>
        <label for="">头像</label>
        <ul class="flex avatar_list">
          <li v-for="item in homeStore.Via_img_List.result" :key="item.nid">
            <el-radio v-model="avatar_id" :label="item.nid">
              <img :src="item.url" alt="" />
            </el-radio>
          </li>
        </ul>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="Wanshan = false">取消修改头像</el-button>
      <el-button type="primary" @click="setAarter">确认修改头像</el-button>
    </span>
  </el-dialog>
  <el-dialog v-model="Wanshan" title="完善信息" width="50%" align-center>
    <div class="edit_info">
      <label>邮箱</label>
      <el-input v-model="Youxiang.email" placeholder="请输入邮箱"></el-input>

      <label>请输入验证码</label>
      <div class="flex coder">
        <el-input
          v-model="Youxiang.auth_code"
          placeholder="请输入验证码"
        ></el-input>
        <el-button ref="codenum" :disabled="isActive" @click="get_code()">
          {{ isActive ? `剩余${count}秒` : "发送邮箱验证码" }}</el-button
        >
      </div>
      <label>请输入密码</label>
      <el-input v-model="Youxiang.password" placeholder="请输入密码"></el-input>
      <label>绑定邮箱后可以通过邮箱+密码登录</label>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Binding_email">确认</el-button>
        <el-button type="primary" @click="Wanshan = false"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped lang="scss">
.user_info {
  width: 100%;
  display: flex;
  border-radius: 5px;
  background-color: #808595;
  .left {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 60px;
      border-radius: 50%;
    }
  }
  .right {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: 50%;
    height: 40px;
    display: flex;
    align-items: center;
  }
}
.coder .el-button {
  width: 120px;
}
.actions {
  width: 100%;
  height: 60px;
  border-radius: 5px;
  margin-top: 20px;
  background-color: #808595;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.edit_info {
  label {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
  }
}
.add_mood_content {
  > div {
    margin-bottom: 20px;
    label {
      height: 60px;
    }
    > div,
    > ul {
      margin-top: 5px;
    }

    .avatar_list {
      flex-wrap: wrap;
      list-style: none;

      > li {
        margin-right: 10px;
        margin-bottom: 10px;

        .el-radio {
          display: flex;
          align-items: center;
        }
      }
    }

    img {
      height: 50px;
      width: 50px;
      border-radius: 5px;
    }
  }
  .show_drawing {
    img {
      width: initial;
      margin-right: 10px;
    }
  }
}
</style>
